@import './varible';

// reset
* {
  box-sizing: border-box;
  outline: none;
}
html {
  font-size: 13px;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  background-color: #F1F1F1;
  -webkit-font-smoothing: antialiased;  // 苹果电脑字体平滑
}
a{
  color: #999;
}
p{
  line-height: 1.5em;
}

@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color
  }
  .bg-#{$colorKey} {
    background-color: $color
  }
}

// text align
@each $align in left, center, right {
  .text-#{$align} {
    text-align: $align !important;
  }
}

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}

// flex
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}
.flex-grow-1 {
  flex-grow: 1
}

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $key;
  }
}

@each $typeKey, $type in $space-types {
  @each $sizeKey, $size in $space-sizes {
      // .m-0 {margin: 0}
      .#{$typeKey}-#{$sizeKey} {
        #{$type}: $size * $base-space-size
      }

      // .mx-0 {margin-left: 0; margin-right: 0}
      .#{$typeKey}x-#{$sizeKey} {
        #{$type}-left: $size * $base-space-size;
        #{$type}-right: $size * $base-space-size;
      }

      // .my-0 {margin-top: 0; margin-bottom: 0}
      .#{$typeKey}y-#{$sizeKey} {
        #{$type}-top: $size * $base-space-size;
        #{$type}-bottom: $size * $base-space-size;
      }
  }
  @each $directionKey, $direction in $space-directions {
    @each $sizeKey, $size in $space-sizes {
      // .mt-1 {margin-top: 1rem}
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $base-space-size
      }
    }
  }
}


// button
.btn {
  border: none;
  border-radius: 0.1538rem;
  font-size: map-get($font-sizes, 'sm') * $base-font-size;
  padding: .2rem .6rem;
}


// nav
.nav {
  .nav-item {
    border-bottom: 3px solid transparent;
    &.active {
      color: map-get($colors, 'primary');
      border-bottom-color: map-get($colors, 'primary');
    }
  }
  &.nav-inverse {
    .nav-item {
      border-bottom: 3px solid transparent;
      &.active {
        color: map-get($colors, 'white');
        border-bottom-color: map-get($colors, 'white');
      }
    }
  }
}

// width height
.w-100 {
  width: 100%;
}
.h-100{
  height: 100%;
}

// sprite
.sprite {
  background: url(../images/sprite.png) no-repeat 0 0;
  background-size: 28.8462rem;
  display: inline-block;
  &.sprite-news {
    width: 1.7692rem;
    height: 1.5385rem;
    background-position: 63.546% 15.517%;
  }
  &.sprite-arrow {
    width: 0.7692rem;
    height: 0.7692rem;
    background-position: 38.577% 52.076%;
  }
}

// card
.card {
  background-color: map-get($colors, 'white');
}

// .borders
@each $dir in (top, right, bottom, left) {
  .border-#{$dir} {
    border-#{$dir}: 1px solid $border-color;
  }
}
